{
    title:  'Meta Data',
    crumbs: [ 
        { "User's Guide": "index.html" },
    ],
}
   
      <h1>Meta Data</h1>

      <p>Web pages have a special area at the top of the page for Meta data. Meta data defines properties for the 
      page that can be passed to layout pages, partial pages and scripts to modify their behavior.</p>

      <h2>Defining Meta Data</h2>
      <p>Meta data is defined in several sources</p>
      <ul>
        <li>Top level expansive.json</li>
        <li>Content directory level expansive.json files</li>
        <li>Content pages</li>
        <li>Layout pages</li>
        <li>Partial pages</li>
      </ul>
      <p>When Expansive renders a file, it aggregates the meta data for the page by blending the meta data from these 
      sources. These sources are blended in this order with the latter sources overwriting the meta data from prior 
      sources. Note: meta data flows one way, top down. There is no way to globally set meta data from a subdirectory 
      <em>expansive.json</em> file or from a content page.</p>

      <h3>Top Level Meta Data</h3>
      <p>The top level expansive.json file defines the global meta data inherited by all pages. This is where you should
      define the web site's home url via the <em>site</em> property.</p>

      <h3>Directory Level Meta Data</h3>
      <p>To help partition an application, meta data may be defined by per-directory <em>expansive.json</em> files. 
      These files define meta data that applies to all pages in that directory or in subdirectories below. </p>

      <h3>Content Page Meta Data</h3>
      <p>Content pages define meta data inline at the top of the page. This meta data applies only to the page itself
      and is also passed to layout and partial pages as they are processed for the content page.</p>  

      <h2>Meta Data Files</h2>
      <p>To define meta data in <em>expansive.json</em> files, set the required property values in the <em>meta</em>
      property collection. For example:</p>

      <pre class="code">{
    meta: {
        property: 'value'
    }
}
</pre>
      <h2>Content Meta Data</h2>
      <p>To define meta data in a content, partial or layout page, set the required property values in the meta data
      section at the top of the page. For example, consider the page <em>contents/index.html</em>.</p>

      <pre class="code">{
    <b>color: 'red'</b>,
    title: 'Hello World'
}    

&lt;p&gt;Hello World&lt;/p&gt;
</pre>

      <p>This Meta data defines two properties <em>meta.color</em> and <em>meta.title</em> for this page. </p>

      <h3>JSON Syntax</h3>
      <p>Expansive supports a relaxed JSON syntax where property keys do not have to be quoted, and you can use a comma
      after the last property in an array or hash. Further, multiline strings
      are supported and may be delimited by single, double or back-tick quotes.</p>

      <p>The Meta section may contain any JSON object, so multiple property levels are permitted.</p>
      <pre class="code">{
    user: {
        name: 'George'
        age: 42,
        address: "1717 Cherry Lane
          London
          UK"
    }
}    
</pre>

      <h2>Accessing Meta Data</h2>
      <p>Meta data may be accessed in pages or scripts via the <em>meta</em> global script property.</p>

      <pre class="code">&lt;p&gt;Favorite Color is: &lt;&#64;= meta.color &#64;&gt;&lt;/p&gt;</pre>

      <p>For debugging, you can <em>print</em> properties or <em>dump</em> all the meta data to the expansive console.</p>

      <pre class="code">&lt;&#64; 
    print("COLOR", meta.color) 
    dump("META", meta)
&#64;&gt;
</pre>

        <a name="properties"></a>
        <h2>Meta Properties</h2>
        <p>These are the standard, pre-defined Meta properties available in content, layout and partial pages.</p>
        <table class="ui celled table" title="predefined">
        <thead>
            <tr><th>Property</th><th>Description</th></tr>
        </thead>
        <tbody>
            <tr><td>abstop</td><td>Absolute URL to the top level home page of the site.</td></tr>
            <tr><td>absurl</td><td>Absolute URL from the application to to the current page.</td></tr>
            <tr><td>date</td><td>Current date and time</td></tr>
            <tr><td>description</td><td>Description of the web site. Sourced from the <em>description</em> 
                property in the package.json file.</td></tr>
            <tr><td>dest</td><td>Final destination name of the rendered page or file in the <em>dist</em> directory.</td></tr>
            <tr><td>destPath</td><td>Destination filename of the page relative to the <em>dist</em> directory.</td></tr>
            <tr><td>current</td><td>Current virtual filename for the interim pipeline content during transformations.</td></tr>
            <tr><td>document</td><td>Input file name of the page being processed. For partials and layouts, 
                this is set to the invoking content page.</td></tr>
            <tr><td>extension</td><td>The extension of the processed page filename.</td></tr>
            <tr><td>extensions</td><td>The set of extensions on the original content page.</td></tr>
            <tr><td>isLayout</td><td>True if a layout is being processed.</td></tr>
            <tr><td>isPartial</td><td>True if a partial page is being processed.</td></tr>
            <tr><td>layout</td><td>Layout page in use. Set to '' if no layout being used.</td></tr>
            <tr><td>mode</td><td>Index name in the pak.modes property. The selected property collection is copied 
                up to the top level of the meta data. This may be used to select a <em>debug</em> or <em>release</em>
                 configuration.</td></tr>
            <tr><td>partial</td><td>Name of the partial page being processed.</td></tr>
            <tr><td>service</td><td>Name of the transformation service being run.</td></tr>
            <tr><td>site</td><td>Home page URL for the web site.</td></tr>
            <tr><td>source</td><td>Current input source file being processed. May be a document, partial, layout or 
                any input resource file. Includes the <em>contents</em>, <em>lib</em>, <em>layouts</em> or <em>partials</em>
                directory.</td></tr>
            <tr><td>site</td><td>Canonical absolute URL to the site. Includes scheme and host.</em> 
            <tr><td>sourcePath</td><td>Source filename relative to the <em>contents</em>, <em>lib</em>, <em>layouts</em>, or 
                <em>partials</em> directories.</td></tr>
            <tr><td>title</td><td>Title of the web site. Sourced from the <em>title</em> property in the <em>package.json</em> 
                file.</td></tr>
            <tr><td>top</td><td>Relative URL to the top level home page of the site.</td></tr>
            <tr><td>url</td><td>Relative URL from the application to to the current page.</td></tr>
        </tbody>
        </table>


        <h3>Layouts</h3>
        <p>A content page can request a different layout by adding a <em>layout</em>
        property to the meta data section of the content page. For example:</p>

        <pre class="code">{
    layout: 'product-layout'
    title:  'Hello World'
}    
&lt;h1&gt;Hello World with Layouts&lt;/h1&gt;
</pre>
        <p>This will select the <em>product-layout</em> in the <em>layouts</em> directory. Set the <em>layout</em>
        property to the empty string <em>""</em> to disable layout processing. Expansive uses the presence of
        a meta data section to enable layout processing. If you omit meta data in your page, you will disable 
        layout processing.</p>

      <h3>Partial Pages</h3>
      <p>You can pass one-off meta data parameters to a partial page without changing the general meta for the page. 
      Do this via the <em>partial</em>() function call. For example:</p>

      <pre class="code">&lt;@ partial('hero', { color: 'rec' }) @&gt;</pre>
